<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="static/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="static/css/register.css" />
  </head>

  <body>
    <div class="pos">
      <div class="login">
        <span class="close iconfont icon-close"></span>
        <img src="static/img/login/loginlogo.png" alt="" />
        <ul>
          <li></li>
          <li class="phone">注册</li>
          <li></li>
        </ul>
        <input
          style="margin-top: 0"
          type="text"
          id="username"
          placeholder="请输入您的用户名"
        />

        <input type="password" id="password" placeholder="请输入密码" />

        <input type="password" id="repwd" placeholder="请再次输入密码" />
        <span class="tips"></span>
        <div class="clear"></div>
        <button class="loginbtn">注册</button>

        <p>
          <input type="checkbox" class="xuanze" />
          <span><a href="javascript:;">我同意 《用户使用协议》</a></span>
          <span>
            已有账号
            <a href="javascript:;">去登陆</a>
          </span>
        </p>
      </div>
    </div>
    <script src="../public/javascripts/jquery.min.js"></script>
    <script>
      // 点击注册使用ajax发送post请求
      $(".loginbtn").click(function () {
        let username = $("#username").val();
        let password = $("#password").val();
        let repwd = $("#repwd").val();
        // 使用ajax发送请求
        $.ajax({
          // 请求方式
          method: "post",
          // 请求路径
          url: "/register",
          // 发送参数
          data: { username, password, repwd },
          // 成功的回调
          success(res){
            $('.tips').html(res)
          }
        });
      });
    </script>
  </body>
</html>
